<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" href="../default/css/index.css">
    <style>
        html,
        body {
            background-color: #efeff4;
        }
        .mui-bar~.mui-content .mui-fullscreen {
            top: 44px;
            height: auto;
        }
        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }
        .mui-bar~.mui-pull-top-tips {
            top: 24px;
        }
        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }
        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }
        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }
        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }
        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }
        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }
        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }
        .mui-pull-top-canvas canvas {
            width: 40px;
        }
        .mui-slider-indicator.mui-segmented-control {
            background-color: #fff;
        }
        #slider .mui-card{
            margin: 0;
        }
        .mui-table-view-cell:after{
            right: 15px;
            color: #f5f6f7;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-control-item{
            width: 50%;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll{
            width: 100%;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left backahter"></a>
    <h1 class="mui-title">我的订单</h1>
</header>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile">未付款</a>
                <a class="mui-control-item" href="#item2mobile">已付款</a>
            </div>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-orderStatus="未付款">
                        <ul class="mui-table-view" id="index0">

                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-orderStatus="已付款">
                        <ul class="mui-table-view" id="index1">

                        </ul>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/mui.pullToRefresh.js"></script>
<script src="../default/js/mui.pullToRefresh.material.js"></script>


<script>
    mui.init();
    mui.showLoading("正在加载..","div");
    // ajax地址

    var startingNumber=0;

    document.getElementById('slider').addEventListener('slide', function (e) {

    });

    function queryUserAll(self,index,orderStatus) {
        mui.showLoading("正在加载..","div");

        var ul = self.element.querySelector('.mui-table-view');
        var length = ul.querySelectorAll('li').length;

        if(length==0){
            startingNumber=0;
        }else if(length%10 == 0){
            startingNumber=length;
        }

        $.ajax({
            url:website+'/OrderController/queryUserAll',
            type:'post',
            data:{
                userId:userId,
                startingNumber:startingNumber,
                orderStatus:orderStatus,
            },
            success:function (data) {
                var html = '';
                data.data.forEach(function (value) {
                    html+='<li class="mui-table-view-cell" data-order-id="'+value.id+'">\n' +
                        '                                <div class="mui-card">\n' +
                        '                                    <div class="mui-card-header">\n' +
                        '                                        <p>订单号:'+value.orderNumber+'</p>\n' +
                        '                                        <p>'+value.orderStatus+'</p>\n' +
                        '                                    </div>\n' +
                        '                                    <div class="mui-card-content">\n' +
                        '                                        <div class="mui-card-content-inner">\n' +
                        '                                            <p>商品名称:'+value.commodity.tradeName+'</p>\n' +
                        '                                            <p>订单时间:'+value.submissionTime+'</p>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                    <div class="mui-card-footer">\n';
                    if(value.purchaseAmount==0 || value.purchaseAmount==''){
                        html+='<p>金额:'+value.commodityReadingTreasure+'阅读宝</p>\n';
                    }else if(value.commodityReadingTreasure==0 || value.commodityReadingTreasure==''){
                        html+='<p>金额:￥'+value.purchaseAmount+'</p>\n';
                    }else{
                        html+='<p>金额:￥'+value.purchaseAmount+'+'+value.commodityReadingTreasure+'阅读宝</p>\n';
                    }
                    html+='                                        <p>查看<i class="mui-icon mui-icon-arrowright"></i> </p>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                            </li>'
                });
                console.log(data.data.length);
                if(data.data.length == 0){
                    self.endPullUpToRefresh(true);
                    mui.hideLoading();
                }else if(data.data.length < 10){
                    if(index==0){
                        $("#index0").append(html);
                    }else {
                        $("#index1").append(html);
                    }
                    self.endPullUpToRefresh(true);
                    mui.hideLoading();
                }else {
                    if(index==0){
                        $("#index0").append(html);
                    }else {
                        $("#index1").append(html);
                    }
                    mui.hideLoading();
                    self.endPullUpToRefresh(false);
                }

            },
            error:function () {
                mui.showLoading("发生错误,返回首页..","div");
                setTimeout(function () {
                    window.location.href = 'http://newst.whilte.com/index.html';
                },1000)
            }
        })
    }
    

    (function($) {
        //阻尼系数
        var deceleration = mui.os.ios?0.003:0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration:deceleration
        });
        $.ready(function() {


            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    up: {
                        auto:true,
                        callback: function() {
                            var self = this;
                            var orderStatus = self.element.dataset.orderstatus;
                            queryUserAll(self,index,orderStatus);
                        }
                    }
                });
            });
            /*function createFragment(index,self) {

                if(index==0){
                    startingNumber=0;
                    startingNumber1=startingNumber1+10;
                    startingNumber=startingNumber1;
                    queryUserAll(self);
                }else if (index==1){
                    startingNumber=0;
                    startingNumber2=startingNumber2+10;
                    startingNumber=startingNumber2;
                    queryUserAll(self);
                }


            };*/
        });
    })(mui);

    mui('.mui-slider-group').on('tap', '.mui-table-view-cell', function (e) {
        var orderId = this.getAttribute('data-order-id');
        localStorage.setItem('orderId',orderId);
        //打开详情页面
        mui.openWindow({
            url: 'orderStatus.html'
        });
    });

    mui('header').on('tap', '.backahter', function (e) {
        localStorage.removeItem('orderId');
        //打开详情页面
        mui.openWindow({
            url: 'task.html'
        });
    });


    $(function () {
        pushHistory();
        window.addEventListener("popstate", function (e) {
            localStorage.removeItem("orderId");
            mui.openWindow({
                url: "task.html",
            });
        }, false);
        function pushHistory() {
            var state = {
                title: "title",
                url: "#"
            };
            window.history.pushState(state, "title", "#");
        }
    });

    window.onload = function () {
        mui.hideLoading();
    }
    
</script>
</body>

</html>